<template>
  <div class="navigation-dropdown" @mouseenter="toggleDropdown" @mouseleave="toggleDropdown">
    <slot><span>{{options?.title}}</span></slot>
    <transition>
      <ul v-show="isOpen" class="dropdown-content">
        <li class="dropdown-item" v-for="(item, index) in options?.dropdownItems" :key="index">
          <a :href="item.link">
            <div :class="'item-icon' + ' icon-' + item.color">
              <i :class="'iconfont' + ' icon-' + item.iconName"></i>
            </div>
            <div class="item-text"><span>{{ item.name }}</span><span>{{ item.text }}</span></div>
          </a>
        </li>
      </ul>
    </transition>
  </div>
</template>

<script>
export default {
  name: 'NavigationDropdown',
  props: {
    options: {
      type: Object,
      required: true,
      default: () => ({
        title: 'Dropdown',
        dropdownItems: [
          { name: 'Item 1', iconName: '', color: '', link: '#' },
          { name: 'Item 2', iconName: '', color: '', link: '#' },
        ],
      }),
    },
  },
  data() {
    return {
      isOpen: false,

    }
  },
  methods: {
    toggleDropdown() {
      this.isOpen = !this.isOpen
    },
  },
}
</script>

<style lang="scss" scoped>
@use 'sass:color';

.navigation-dropdown {
  display: inline-block;
  // width: 100%;
  height: 100%;
  position: relative;
}

.dropdown-content {
  width: max-content;
  min-width: 160px;
  list-style: none;
  border-radius: 15px;
  box-shadow:  vars.$vt-c-ring-shadow, vars.$vt-c-ring-offset-shadow, vars.$vt-c-shadow;
 
  background-color: vars.$vt-c-white;
  overflow: hidden;
  padding: 10px 0;
  z-index: 1;
  transition: all 0.3s ease;
  position: absolute;

  .dropdown-item {
    display: block;
    width: 100%;
    text-decoration: none;
    color: vars.$vt-c-black;
    // border: 1px solid #ccc;
    padding: 10px 15px;
    cursor: pointer;
    transition: background-color 0.3s ease;

    &:hover {
      color: vars.$vt-c-primary;
      background-color: vars.$vt-c-blue-f3f4f6;
    }

    a {
      display: flex;
      align-items: center;
      text-decoration: none;
      color: inherit;
      // border: 1px solid #ccc;
      padding: 0 10px;

      .item-icon {
        width: 30px;
        height: 30px;
        text-align: center;
        line-height: 30px;
        border-radius: 10px;
        margin-right: 8px;

        &.icon-blue {
          color: vars.$vt-c-blue-6366f1;
          background-color: color.scale(vars.$vt-c-blue-6366f1, $lightness: 85%);
        }

        &.icon-purple {
          color: vars.$vt-c-purple-a855f7;
          background-color: color.scale(vars.$vt-c-purple-a855f7, $lightness: 85%);
        }

        &.icon-green {
          color: vars.$vt-c-green-22c55e;
          background-color: color.scale(vars.$vt-c-green-22c55e, $lightness: 85%);
        }

        &.icon-orange {
          color: vars.$vt-c-orange-f97316;
          background-color: color.scale(vars.$vt-c-orange-f97316, $lightness: 85%);
        }

        .iconfont {
          font-size: vars.$font-size;
          text-align: center;
        }
      }

      .item-text {
        display: flex;
        flex-direction: column;

        & span:first-child {
          font-size: vars.$vt-c-font-size-16; // 16px
          font-weight: 500;
        }

        & span:last-child {
          font-size: 12px;
          color: vars.$vt-c-gray-500;
        }
      }
    }
  }
}

.v-enter-active,
.v-leave-active {
  transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.v-enter-from,
.v-leave-to {
  opacity: 0;
}
</style>
